<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            width: 1228px;
            margin: 50px auto;
            background-color: greenyellow;
            text-align: center;
        }
        .all button{
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload = function (){
            var imgArr = ["../img/banner1.png","../img/banner2.png","../img/banner3.png","../img/banner4.png","../img/banner5.png"]
            var index = 0
            var img = document.getElementsByTagName('img')[0]
            var prev = document.getElementById('prev')
            var title = document.getElementsByClassName('title')[0]
            title.innerHTML = '共'+imgArr.length+'张图片，当前第'+(index+1)+'张'
            prev.onclick = function (){
                index--
                if (index<0){
                    index = imgArr.length-1
                }
                img.src = imgArr[index]
                title.innerHTML = '共'+imgArr.length+'张图片，当前第'+(index+1)+'张'
            }
            var next = document.getElementById('next')
            next.onclick = function (){
                index++
                if (index > imgArr.length-1){
                    index = 0
                }
                img.src = imgArr[index]
                title.innerHTML = '共'+imgArr.length+'张图片，当前第'+(index+1)+'张'
            }

        }
    </script>
</head>
<body>
    <div class="all">
        <p class="title"></p>
        <img src="../img/banner1.png">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>

</body>
</html>